<template>
  <div ref="chart"  :style="chartStyle">
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  name: 'customcar',
  props: {
    config: {
      required: true,
    },
    chartStyle: {
      require: false,
      type: Object,
      default: () => ({
        height: '100%',
        position: 'absolute',
        width: '100%',
        top: '0px',
        bottom: '0px',
        left: '0px',
      }),
    },
  },
  data() {
    return {
      chart: null,
      option: null,
    };
  },
  created() {

  },
  mounted() {
    this.renderChart();
  },
  methods: {
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    renderChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.chart, this.config.theme);
      }
      const option = this.makeOptions(this.config, this.chartData);
      this.chart.clear();
      this.chart.setOption(option);
      setTimeout(() => {
        this.chart.resize();
      }, 100);
    },
    makeOptions() {
      this.option = this.commonEchartOption_4(
        ['#9fb9e3', 21, '链路利用率Top5', '5%'],
        [
          ['15%', '10%', '53%', '5'],
          ['15%', '55%', '7%', '5'],
        ],
        [
          [1020, 0],
          [1060, 1],
        ],
        [
          [
            'category',
            'left',
            [-5, 0, 0, 0],
            [-70, 0, 0, 12],
            '#9FB9E3',
            16,
            35,
            0,
            'left',
            [-32, -30, 0, 0],
            14,
            [true, [32, -30, 0, 0]],
          ],
          [
            'category',
            'left',
            [-5, 0, 0, 0],
            [-70, 0, 0, 10],
            '#9FB9E3',
            16,
            5,
            1,
            'left',
            [-32, -20, 0, 0],
            14,
            [true, [32, -20, 0, 0]],
          ],
        ],
        [
          [
            '一平面入口流量',
            '8%',
            '#00D4FF',
            '#00D4FF',
            0,
            0,
            ['40%', ['80%', '100%'], ['0%', '0%']],
            [true, '进', '#00D4FF'],
          ],
          [
            '一平面出口流量',
            '8%',
            '#34E598',
            '#34E598',
            0,
            0,
            ['40%', ['80%', '100%'], ['0%', '0%']],
            [true, '出', '#34E598'],
          ],
          [
            '二平面入口流量',
            '8%',
            '#00D4FF',
            '#00D4FF',
            1,
            3,
            ['40%', ['80%', '100%'], ['0%', '0%']],
            [true, '进', '#00D4FF'],
          ],
          [
            '二平面出口流量',
            '8%',
            '#34E598',
            '#34E598',
            1,
            3,
            ['40%', ['80%', '100%'], ['0%', '0%']],
            [true, '出', '#34E598'],
          ],
        ],
        5,
        'Mb',
        true,
      );
      this.option.yAxis[0].data = ['xx站(一平面)', 'xx站(一平面)', 'xx站(一平面)', 'xx站(一平面)', 'xx站(一平面)'];
      this.option.series[0].data = [360, 420, 534, 635, 800];
      this.option.series[1].data = [400, 434, 335, 260, 220];
      this.option.yAxis[1].data = [360, 420, 534, 635, 800];
      this.option.yAxis[2].data = [400, 434, 335, 260, 220];
      this.option.yAxis[3].data = ['xx站(二平面)', 'xx站(二平面)', 'xx站(二平面)', 'xx站(二平面)', 'xx站(二平面)'];
      this.option.series[2].data = [360, 420, 534, 635, 800];
      this.option.series[3].data = [400, 434, 335, 260, 220];
      this.option.yAxis[4].data = [360, 420, 534, 635, 800];
      this.option.yAxis[5].data = [400, 434, 335, 260, 220];
      return this.option;
    },
    commonEchartOption_4(
      titleobj,
      gridobj,
      xaisobj,
      yaisobj,
      seriesobj,
      datalength,
      dwval,
      pmimgbool,
      serieslabobj,
    ) {
      const option = {};
      option.backgroundColor = {
        type: 'radial',
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [
          {
            offset: 0,
            color: '#0f2660',
          },
          {
            offset: 1,
            color: '#020712',
          },
        ],
        global: false,
      };
      option.title = {
        text: titleobj[2] ? titleobj[2] : '统计分析图',
        textStyle: {
          fontFamily: '宋体', fontWeight: 'bolder', color: titleobj[0], fontSize: titleobj[1],
        },
        left: titleobj[5] ? titleobj[5] : 'center',
      };
      const gridarr = [];
      for (let i = 0; i < gridobj.length; i += 1) {
        gridarr.push({
          top: gridobj[i][0], left: gridobj[i][1], right: gridobj[i][2], bottom: gridobj[i][3],
        });
      }
      option.grid = gridarr;
      option.tooltip = { show: false };
      const xaisarr = [];
      for (let i = 0; i < xaisobj.length; i += 1) {
        xaisarr.push({
          type: 'value',
          gridIndex: xaisobj[i][1],
          axisLine: { show: false },
          max: xaisobj[i][0],
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
        });
      }
      option.xAxis = xaisarr;
      serieslabobj = serieslabobj || [];
      const yaisarr = [];
      for (let i = 0; i < yaisobj.length; i += 1) {
        yaisarr.push({
          type: yaisobj[i][0],
          offset: yaisobj[i][6],
          splitLine: { show: false },
          axisLine: { show: false },
          axisLabel: {
            show: true,
            align: yaisobj[i][1],
            padding: yaisobj[i][2],
            textStyle: { color: yaisobj[i][4], fontSize: yaisobj[i][5] },
            formatter(params, index) {
              if (index === datalength - 1) {
                return `${'{b|}{name|'}${params}}`;
              }
              return `{c|${datalength - index}}{name|${params}}`;
            },
            rich: {
              b: {
                backgroundColor: {
                  image:
                                '',
                },
                width: 29,
                height: 29,
                align: 'center',
              },
              c: {
                color: '#FFFFFF',
                width: 29,
                height: 29,
                align: 'center',
                verticalAlign: 'center',
                backgroundColor: {
                  image:
                                '',
                },
                fontSize: yaisobj[i][5],
              },
              name: { color: '#9FB9E3', fontSize: yaisobj[i][5], padding: yaisobj[i][3] },
            },
          },
          axisTick: { show: false },
          gridIndex: yaisobj[i][7] ? yaisobj[i][7] : 0,
          position: yaisobj[i][8] ? yaisobj[i][8] : 'left',
        });
        yaisarr.push({
          type: 'category',
          gridIndex: yaisobj[i][7] ? yaisobj[i][7] : 0,
          position: 'right',
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            show: true,
            align: 'right',
            fontSize: yaisobj[i][5],
            formatter(params) {
              return `{name|${params}${dwval}}`;
            },
            rich: {
              name: {
                color: '#9FB9E3', width: 100, fontSize: yaisobj[i][10], padding: yaisobj[i][9],
              },
            },
          },
        });
        if (yaisobj[i][11] && yaisobj[i][11][0]) {
          yaisarr.push({
            type: 'category',
            gridIndex: yaisobj[i][7] ? yaisobj[i][7] : 0,
            position: 'right',
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              show: true,
              align: 'right',
              fontSize: yaisobj[i][5],
              formatter(params) {
                return `{name|${params}${dwval}}`;
              },
              rich: {
                name: {
                  color: '#9FB9E3', width: 100, fontSize: yaisobj[i][10], padding: yaisobj[i][11][1],
                },
              },
            },
          });
        }
      }
      option.yAxis = yaisarr;
      const seriesarr = [];
      for (let i = 0; i < seriesobj.length; i += 1) {
        const objseriesv = {
          name: seriesobj[i][0],
          xAxisIndex: seriesobj[i][4],
          yAxisIndex: seriesobj[i][5],
          barGap: '220%',
          barCategoryGap: '5%',
          barWidth: seriesobj[i][1],
          type: 'pictorialBar',
          symbol: 'rect',
          symbolMargin: seriesobj[i][6][0],
          symbolSize: seriesobj[i][6][1],
          symbolOffset: seriesobj[i][6][2],
          symbolRepeat: true,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: seriesobj[i][2] },
                { offset: 1, color: seriesobj[i][3] },
              ],
              global: false,
            },
          },
          z: 2,
        };
        if (seriesobj[i][7] && seriesobj[i][7][0]) {
          objseriesv.label = {
            show: seriesobj[i][7][0],
            position: 'left',
            offset: serieslabobj[0] ? serieslabobj[0] : [-64, 0],
            padding: serieslabobj[1] ? serieslabobj[1] : [0, 0, 0, 295],
            borderWidth: 1,
            borderColor: serieslabobj[2] ? serieslabobj[2] : '#1F2C83',
            distance: serieslabobj[3] ? serieslabobj[3] : -370,
            color: seriesobj[i][7][2] ? seriesobj[i][7][2] : '#9FB9E3',
            fontSize: serieslabobj[4] ? serieslabobj[4] : 13,
            formatter: seriesobj[i][7][1],
          };
        }
        seriesarr.push(objseriesv);
      }
      option.series = seriesarr;
      if (pmimgbool && option.yAxis.length >= 2) {
        for (let j = 1; j < option.yAxis.length; j += 1) {
          if (option.yAxis[j].position === 'left') {
            option.yAxis[j].axisLabel.formatter = function renderName(params) {
              return `{name|${params}}`;
            };
          }
        }
      }
      return option;
    },
  },
  watch: {
    config: {
      deep: true,
      handler() {
        if (this.config.needResize) {
          this.config.needResize = false;
          this.handleResize();
        }
      },
    },
  },
};
</script>

<style scoped lang="stylus">

</style>
